<template>
    <Layout :items="['合同管理']">
        <el-tabs v-model="active">
            <el-tab-pane name="show" label="查看">
                <!-- 行内一行 选项查询-->
                <el-form :inline="true">
                    <el-form-item label="跟进庄园">
                        <!-- 下拉选择 -->
                        <el-select placeholder="请选择行业" v-model="searchForm.industary" clearable>
                            <el-option v-for="item in industaryData" :key="item" :label="item" :value="item" >{{
                                item
                            }}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="干">
                        <el-select placeholder="进度" v-model="searchForm.status" clearable>
                            <el-option v-for="item in statusData" :key="item" :label="item" :value="item" >{{ item
                            }}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="公司">
                        <el-select placeholder="公司" v-model="searchForm.company">
                            <el-option v-for="item in companyData" :key="item" :label="item" :value="item" clearable>{{ item
                            }}</el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <!--查询 circle圆形 -->
                        <el-button type="primary" :icon="Search" circle @click="handleSearch"></el-button>
                    </el-form-item>

                </el-form>
                <!-- 表格 -->
                <el-table :data="customData" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="80" align="center" />
                    <el-table-column prop="company" label="公司" width="auto" />
                    <el-table-column prop="province" label="省份" width="100" align="center" />
                    <el-table-column prop="name" label="姓名" width="80" align="center" />
                    <el-table-column prop="phone" label="电话" width="130" align="center" />
                    <el-table-column prop="title" label="职称" width="80" align="center" />
                    <el-table-column prop="status" label="跟进状态" width="80" align="center" />
                    <el-table-column prop="needs" label="需求" width="180" align="center" />
                    <el-table-column width="100" label="操作" align="center">
                        <template #default="{ row }">
                            <el-button tpre="primary" :icon="Edit" circle @click="custonEdit(row.id)"></el-button>
                            <el-button :icon="Delete" circle @click="customDele(row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- row 弹性布局容器 分页器 -->
                <el-row style="height: 60px;" justify="center" align="middle">
                    <!-- 分页器 layout分页器布局<> -->
                    <el-pagination layout="prev, pager, next" :total="total" v-model:page-size="limit"
                        v-model:current-page="page" @current-change="getData" />
                </el-row>
            </el-tab-pane>
            <!-- 添加栏 -->
            <el-tab-pane name="add" label="添加">
                <el-row>
                    <el-col :span="12">
                        <el-form label-width="150px" :model="customForm" :rules="customRule" ref="customRef">
                            <el-form-item label="公司" prop="company">
                                <el-input type="text" v-model="customForm.company"></el-input>
                            </el-form-item>
                            <el-form-item label="行业" prop="industary">
                                <el-select placeholder="请选择行业" v-model="customForm.industary">
                                    <el-option v-for="item in industaryData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="省份" prop="province">
                                <el-select placeholder="请选择省份" v-model="customForm.province">
                                    <el-option v-for="item in provinceData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input type="text" v-model="customForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="职称" prop="title">
                                <el-input type="text" v-model="customForm.title"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input type="text" v-model="customForm.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="需求" prop="needs">
                                <el-input type="textarea" v-model="customForm.needs"></el-input>
                            </el-form-item>
                            <el-form-item label="是否跟进" prop="status">
                                <el-select placeholder="请选择状态" v-model="customForm.status">
                                    <el-option v-for="item in  statusData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addData">提交</el-button>
                                <el-button type="warning" @click="resetForm(customRef)">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
        <!-- 编辑功能 -->
        <el-dialog v-model="show" title="编辑信息" width="50%">
        <el-form :model="editForm"  ref="editcustomRef">
            <el-form-item label="公司" prop="company">
                                <el-input type="text" v-model="editForm.company"></el-input>
                            </el-form-item>
                            <el-form-item label="行业" >
                                <el-select placeholder="请选择行业" v-model="editForm.industary">
                                    <el-option v-for="item in industaryData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="省份" >
                                <el-select placeholder="请选择省份" v-model="editForm.province">
                                    <el-option v-for="item in provinceData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="姓名" >
                                <el-input type="text" v-model="editForm.name"></el-input>
                            </el-form-item>
                            <el-form-item label="职称" >
                                <el-input type="text" v-model="editForm.title"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" >
                                <el-input type="text" v-model="editForm.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="需求" >
                                <el-input type="textarea" v-model="editForm.needs"></el-input>
                            </el-form-item>
                            <el-form-item label="是否跟进" >
                                <el-select placeholder="请选择状态" v-model="editForm.status">
                                    <el-option v-for="item in  statusData" :key="item" :label="item" :value="item"
                                        clearable>{{ item }}
                                    </el-option>
                                </el-select>
                            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="show=false">取消</el-button>
                <el-button type="primary" @click="handleEdit">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>



    </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { getCustom ,getoneCustom,editCustom,deleteCustom} from "../api/api"
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus';
import { addCustom } from "../api/api"



const active = ref('show')
const customData = ref<{
    id: number,
    company: string;
    industary: string,
    province: string,
    name: string,
    phone: string,
    title: string,
    status: string,
    needs: string,
}[]>()
const page = ref(1)


const limit = ref(5)
const total = ref(0)
const getData = async () => {
    const ref = await getCustom({ page: page.value, limit: limit.value });
    customData.value = ref.data.data.row;
    total.value = ref.data.data.count;
};


const industaryData = ["风力", "电力", "农业", "水利", "林业", "应急", "省市县一体化", "煤矿", "消防武警", '企业', '数据服务', '政府机关', '新能源', '地质', '内涝', '保险', '天然氧吧', '气候可行性论证', '影视及广告', '航空', '直属兄弟单位', '气候好产品', '气象灾害风险普查', '三大运营商', '高速交通',]
const statusData = ['未跟进', '已跟进', '已交接']
const companyData = ref('')

const searchForm = reactive({
    id: null,
    company: '',
    industary: '',
    province: '',
    name: '',
    phone:null ,
    title: '',
    status: '',
    needs: '',
})

const handleSearch = async () => {
    page.value = 1;
    const query: any = { page: page.value, limit: limit.value };
    if (searchForm.industary) {
        query.industry = searchForm.industary;
    }
    if (searchForm.status) {
        query.status = searchForm.status;
    }
    if (searchForm.company) {
        query.company = searchForm.company;
    }
    const res = await getCustom(query);
    customData.value = res.data.data.row;
    total.value = res.data.data.count;
};
onMounted(() => {
    getData();
})

//添加栏
const provinceData = ["山东省", "江苏省", "安徽省", "浙江省", "福建省", "上海省", "广东省", "广西省", "海南省", "湖北省", "湖南省", "河南省", "江西省", "北京省", "天津省", "河北省", "山西省", "内蒙古省", "宁夏省", "新疆省", "青海省", "陕西省", "甘肃省", "四川省", "云南省", "贵州省", "西藏省", "重庆省", "辽宁省", "吉林省", "黑龙江省",]
const customForm = reactive({
    id: 1,
    company: '',
    industary: '',
    province: '',
    name: '',
    phone: '',
    title: '',
    status: '',
    needs: '',
})

const check1 = (rule: any, value: any, cb: any) => {
    let reg = /^1[3-9]\d{10}$/
    setTimeout(() => {
        if (reg.test(value)) {
            cb();
        } else {
            cb(new Error("密码必须由1开头的11位数字组成"));
        }
    }, 1000)
}
const customRef = ref<FormInstance>();
const customRule: FormRules = {
    company: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
    phone: { required: true, message: "请输入电话", validator: check1, trigger: "blur" },
    industary:{ required: true, message: "请选择行业", trigger: "blur" },
    name: { required: true, message: "请输入姓名", trigger: "blur" },
    needs: { required: true, message: "请输入需求", trigger: "blur" },
    province: { required: true, message: "请选择省份", trigger: "blur" },
    title:{ required: true, message: "请输入职称", trigger: "blur" },
    status:{ required: true, message: "请选择状态", trigger: "blur" }

}

const addData = () => {
    customRef.value?.validate(async (val) => {
        if (val) {
            const res = await addCustom(customForm);
            if (res.data.data.code === 10000) {
                ElMessage.success("添加成功");
                // console.log(router);
                customRef.value?.resetFields();
                getData();
            } else {
                ElMessage.error("添加失败");
            }

        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//编辑
const show=ref(false)
const editForm=ref({
    id:1,
    company: '',
    industary: '',
    province: '',
    name: '',
    phone: '',
    title: '',
    status: '',
    needs: '',
})
const editcustomRef=ref<FormInstance>()
const custonEdit=async  (id:number)=>{
    const res=await getoneCustom(id);
    editForm.value=res.data.data;
    show.value=true;
}
const handleEdit=()=>{
    editcustomRef.value?.validate(async (val)=>{
        if(val){
            const res=await editCustom(editForm.value,editForm.value.id)
            if(res.data.data.code===10000){
                ElMessage.success("修改成功");
                show.value=false;
            }else{
                ElMessage.error("修改失败")
            }
        }
    })
}


//删除
const customDele=(id:number)=>{
    ElMessageBox.confirm(
        '确认删除  ',/* 内容 */
        '警告',/* 标题 */
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await deleteCustom(id);
            if (res.data.data.code === 10000) {
                ElMessage.success("删除成功");
                getData();
            }

        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '删除失败',
            })
        })
}


</script>

<style scoped></style>